<template>
  <div>
    <div class="text-center">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="城市等级" prop="city">
          <el-select v-model="form.grade" placeholder="请选择活动区域">
            <el-option label="一线城市" value="一线城市"></el-option>
            <el-option label="二线城市" value="二线城市"></el-option>
            <el-option label="三线城市" value="三线城市"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-select v-model="form.starting" placeholder="请选择活动区域">
            <el-option
              v-for="item in showdept"
              :key="item.city"
              :label="item.city"
              :value="item.city"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.payissuetime" style="width: 100%;"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择时间" v-model="form.payarrivetime" style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="订单类型" prop="city">
          <el-select v-model="form.type" placeholder="请选择活动区域">
            <el-option label="实时代叫车" :value="0"></el-option>
            <el-option label="实时自叫车" :value="1"></el-option>
            <el-option label="实时货运" :value="2"></el-option>
            <el-option label="预约代叫车" :value="3"></el-option>
            <el-option label="预约自叫车" :value="4"></el-option>
            <el-option label="预约货运" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div ref="barChart" :style="{ width: '100%', height: '400px' }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { orderresponse,listOrderfrom } from '@/api/orders/orderfrom'
import axios from 'axios'
import { citysel } from '@/api/cityRank/cityRank'

export default {
  name: 'BarChart',
  data() {
    return {
      showdept: [],
      form: {},
      chartInstance: null,
      chartOption: {
        title: {
          text: '订单支付时间柱状图'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: [] // 动态填充支付时间（payissuetime）
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [] // 动态填充订单数量（counts）
          }
        ]
      }
    }
  },

  methods: {
    getList1() {
      citysel().then(res => {
        this.showdept = res.data
      })
    },
    onSubmit() {
      this.setChartData()
    },
    initChart() {
      this.chartInstance = echarts.init(this.$refs.barChart)
      this.chartInstance.setOption(this.chartOption)
      window.addEventListener('resize', this.handleResize)
    },
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize()
      }
    },
    setChartData() {
      // 模拟后台返回的数据
      orderresponse(this.form).then(responseData => {
        // 处理返回的数据
        if (responseData.code === 200) {
          const payissuetime = responseData.data.map(order => order.payissuetime)
          const counts = responseData.data.map(order => order.counts)

          // 更新图表中的数据
          this.chartOption.xAxis.data = payissuetime
          this.chartOption.series[0].data = counts

          // 重新设置图表
          this.chartInstance.setOption(this.chartOption)
        } else {
          console.error('Error fetching data:', responseData.msg)
        }
      })

    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.chartInstance) {
      this.chartInstance.dispose()
    }
  },
  mounted() {
    this.initChart()
    this.setChartData() // 设置图表数据
    this.getList1()
  }
}
</script>

<style>
</style>
